<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>gochat</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="css/materialize.min.css">
	<link rel="stylesheet" href="css/app.css">
</head>
<body>

<div class="container">
	<div class="chat">
	    <div class="chat-frame">
	    	<div class="title">
	    		群聊
	    	</div>
	    	<div class="box row">
	    		<div class="col s9 msg">
	    			<div class="msg-list" id="msgList">
	    				<div class="msg-item"><span class="system">欢迎来到聊天室，在右边输入信息开始聊天吧</span></div>

	    				<!--<div class="msg-item">-->
	    					<!--<div class="left-item">-->
	    						<!--<div class="avatar left">-->
	    							<!--<img class="circle" src="./img/a1.jpg" width="40" height="40" />-->
	    						<!--</div>-->
	    						<!--<div class="content left-align">-->
									<!--<div class="nickname">会飞的猪</div>-->
									<!--<span>这个热闹在书生第三</span>-->
								<!--</div>-->
	    					<!--</div>-->
	    				<!--</div>-->

	    				<!--<div class="msg-item">-->
	    					<!--<div class="right-item">-->
	    						<!--<div class="avatar right">-->
	    							<!--<img class="circle" src="./img/a1.jpg" width="40" height="40" />-->
	    						<!--</div>-->
	    						<!--<div class="content right-align">-->
									<!--<div class="nickname">会飞的猪</div>-->
									<!--<span>个热闹在书生第三这个热闹在书生第三这个热闹在书生第三</span>-->
								<!--</div>-->
	    					<!--</div>-->
	    				<!--</div>-->

	    			</div>
	    			<div class="msg-input">
	    				<div class="tool blue-grey darken-1">
							<div class="chip">
								<img src="img/avatar/avatar_8.jpg" alt="Contact Person">
								无人大师
								<i class="close material-icons">close</i>
							</div>
	    				</div>
	 					<div class="row">
	 						<div class="col s10">
		    					<textarea id="body"></textarea>
		    				</div>
		    				<div class="submit col s2">
								<a id="send" class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">send</i></a>
		    				</div>
		    			</div>
	    			</div>
	    		</div>
	    		<div class="col s3 info">
					<div class="info-form">
						<form>
							<div id="wait_link" class="wait_link">

								<div class="avatar" id="checkAvatar">
									<img id="avatar" class="circle" src="img/avatar/avatar_0.jpg" width="100" height="100">
								</div>
								<div class="input-field">
									<input id="user" type="text" class="validate">
									<label>昵称</label>
								</div>
								<div class="input-field">
									<input id="password" type="password" class="validate">
									<label>口令</label>
								</div>
								<a id="link_href" class="waves-effect waves-light btn">连接</a>
							</div>
							<div id="linked" class="linked" style="display: none;">

								<div class="avatar">
									<img id="avatarImg" class="circle" src="" width="100" height="100">
								</div>
								<div class="nickname">
									<span id="nicknameSpan"></span>
								</div>

							</div>
						</form>
					</div>
					<div class="inline-list" id="onlineList" style="display: none;">
						<div class="inline-title">当前在线：<span id="online">0</span></div>
						<div class="inline-box" id="onlineBox">
							<!--<div class="chip">-->
								<!--<img src="img/avatar/avatar_0.jpg" alt="Contact Person">-->
								<!--李四李四李四李四李四-->
								<!--&lt;!&ndash;<i class="close material-icons">close</i>&ndash;&gt;-->
							<!--</div>-->
							<!--<div class="chip">-->
								<!--<img src="img/avatar/avatar_3.jpg" alt="Contact Person">-->
								<!--拉坦大撒旦的-->
								<!--&lt;!&ndash;<i class="close material-icons">close</i>&ndash;&gt;-->
							<!--</div>-->
							<!--<div class="chip">-->
								<!--<img src="img/avatar/avatar_8.jpg" alt="Contact Person">-->
								<!--无人大师-->
								<!--&lt;!&ndash;<i class="close material-icons">close</i>&ndash;&gt;-->
							<!--</div>-->
						</div>
					</div>
	    		</div>
	    	</div>
	    </div>
    </div>
    <div class="footer">
    	<div class="fixed-action-btn horizontal">
		    <a class="btn-floating btn-large red">
				<i class="large material-icons">menu</i>
		    </a>
		    <ul>
		      	<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
		      	<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
		      	<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
		      	<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
		    </ul>
		</div>
    </div>
	<div class="alert">

	</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/webChat.js"></script>
<script type="text/javascript">

    var ws = webChat.Init("ws://localhost:8181/ws");
</script>
</body>
</html>